<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>

    <script src="../js/vue.global.js"></script>
    <script src="../js/vue-router.global.js"></script>
    <script src="../js/axios.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: #f5f5f5;
            padding: 20px;
            color: #333;
        }

        #app {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            text-align: center;
            font-size: 24px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
        }

        th, td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #495057;
        }

        tr:hover {
            background-color: #f9f9f9;
        }

        button {
            padding: 8px 15px;
            margin: 0 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        button:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        button:active {
            transform: translateY(0);
        }

        button[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .total-section {
            text-align: right;
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            padding: 15px 0;
            border-top: 2px solid #eee;
        }

        .clear-btn {
            background-color: #dc3545;
            color: white;
            padding: 10px 20px;
            display: block;
            margin: 20px auto 0;
            font-size: 16px;
        }

        .add-btn {
            background-color: #28a745;
            color: white;
        }

        .subtract-btn {
            background-color: #ffc107;
            color: #212529;
        }

        .delete-btn {
            background-color: #dc3545;
            color: white;
        }
    </style>

</head>
<body>
    <h2>购物车</h2>
    <div id="app">
        <h2>商品信息</h2>
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item) in cart">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.count}}</td>
                <td>
                    <button @click="subtractItem(item.id)">-</button>
                    <button @click="deleteItem(item.id)">移除商品</button>
                    <button @click="addItem(item.id)">+</button>
                </td>
            </tr>
        </table>
        <h2>总计：{{totalPrice}}</h2>
        <button @click="clearCart">清空购物车</button>
        <button @click="checkout">结算</button>
    </div>


<script>
    const app=Vue.createApp({
        data(){
            return{
                cart:[], //购物车里面存的是商品
                totalPrice:0 //总价
            }
        },
        methods:{
            getCart(){   //获取购物车中的商品
                axios.get('/cart/list')
                   .then(res=>{
                        console.log(res.data)
                        this.cart=res.data
                       //计算总价钱
                       //解释函数reduce的用法：
                       //reduce(callback(accumulator,currentValue,currentIndex,arr),initialValue)
                       //callback函数接受四个参数：accumulator、currentValue、currentIndex、arr
                       //accumulator：累计器，即上一次回调函数的返回值，初始值为initialValue
                       //currentValue：当前数组元素的值
                       //currentIndex：当前数组元素的索引
                       //arr：原数组
                       //initialValue：可选，初始值，默认为数组中的第一个元素
                       //返回值：累计器的最终值
                        this.totalPrice=res.data.reduce((pre,item)=>{
                            return pre+item.price*item.count;
                        },0)
                    }).catch(err=>{
                        console.log(err)
                    })
            },
            deleteItem(id) {   //移除购物车中的商品
                console.log("移除购物车中的商品")
                console.log(id)
                axios.delete('/cart/delete/'+id)
                   .then(res=>{
                        console.log(res.data)
                        this.getCart() //更新购物车中的商品
                    }).catch(err=>{
                        console.log(err)
                    })
            },
            clearCart() {   //清空购物车
                axios.delete('/cart/clear')
                    .then(res => {
                        console.log(res.data)
                        this.cart = []
                        this.totalPrice = 0
                    }).catch(err => {
                    console.log(err)
                })

            },
            addItem(id) {   //增加购物车中的商品
                console.log("增加购物车中的商品")
                console.log(id)
                axios.put('/cart/addCount/'+id)
                   .then(res=>{
                        console.log(res.data)
                        this.getCart() //更新购物车中的商品
                    }).catch(err=>{
                        console.log(err)
                    })
            },
            subtractItem(id) {   //减少购物车中的商品
                console.log("减少购物车中的商品")
                console.log(id)
                axios.put('/cart/subCount/'+id)
                   .then(res=>{
                        console.log(res.data)
                        this.getCart() //更新购物车中的商品
                    }).catch(err=>{
                        console.log(err)
                    })
            },
            checkout(){   //结算
                console.log("结算")
                axios.post('/cart/checkout')
                   .then(res=>{
                        console.log(res.data)
                        //跳转到支付页面
                        this.getCart() //更新购物车中的商品
                   }).catch(err=>{
                        console.log(err)
                   })

            }
        },
        mounted(){
            this.getCart() //页面加载完毕后，获取购物车中的商品
        }
    })

    app.mount('#app')
</script>




</body>
</html>